<template>
  <div id="mine-message-list">
    <ul>
      <li v-for="(item, index) in items">
        <h2>{{ item.title }}</h2>
        <p>{{ item.content }}</p>
        <span>{{ item.created_time }}</span>
      </li>
    </ul>

    <empty-message v-if="tipShow" message="暂无消息"></empty-message>
  </div>
</template>

<script>
  import EmptyMessage from '../comp/empty-message.vue';
  export default {
    name: "mine-message-list",
    components: {
      EmptyMessage
    },
    data() {
      return {
        items: [],
        tipShow: false
      }
    },
    created() {
      this.$http.post({
        api: this.$api.USER_MESSAGE_LIST,
        params: {
          user_id: localStorage.getItem('id'),
          type: this.$route.query.type
        },
        success: (res) => {
          this.items = res.data.data;
          if (res.data.data.length === 0) {
            this.tipShow = true;
          }
        }
      })
    }
  }
</script>

<style scoped lang="scss">

  #mine-message-list {
    >ul {
      background: $white;

      >li {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        min-height: 9.5rem;
        padding: 1rem;
        border: 1px solid #f5f5f5;

        >h2 {
          font-size: 1.5rem;
          font-weight: bold;
          color: #333;
        }

        >p {
          font-size: 1.2rem;
          color: #999;
          padding: .8rem 0;
        }

        >span {
          font-size: .9rem;
          color: #999;
        }
      }
    }
  }
</style>
